<template>
    <!--用户行为日期展示框-->
    <div id="userDate">
        <div style="padding: 4px 16px">
            <el-input
                    placeholder="搜索"
                    prefix-icon="el-icon-search"
                    size="small"
                    v-model="currentSearchValue"
                    clearable
            >
            </el-input>
        </div>

        <div class="selectOptionsContent" id="selectOptionsContent" ref="selectOptionsContent">

            <template v-for="(headItem,headIndex) in tabsHeadParams">
                <el-row class="selectOptionsContentRows" :id="headItem">
                    <el-col :span="1" style="height: 100%">
                        <div style="width: 3px;height: 18px;margin-top: 6px;background-color: #04cb94"></div>
                    </el-col>
                    <el-col :span="23"
                            style="height: 100%;justify-content: center;line-height: 30px;display: flex;align-items:center">
                        <div>{{headItem}}</div>
                        <div style="flex:1 0 auto;background:#e9f0f7;height:1px"></div>
                    </el-col>
                </el-row>

                <div class="selectBox">
                    <template v-if="tabsBodyParams[headIndex]!==undefined&&tabsBodyParams[headIndex].list!==undefined">
                        <template v-for="(bodyItem,itemIndex) in tabsBodyParams[headIndex].list">
                            <template>
                                <div class="selectItem" v-show="currentSearchValue===''||bodyItem.cname.indexOf(currentSearchValue)>-1" @click="selectItem(bodyItem)">
                                    <div class="searchOptionsContentRowsItem"
                                         v-html="addInputColor(bodyItem.cname)"></div>
                                </div>
                            </template>
                        </template>
                    </template>
                </div>


            </template>
        </div>
    </div>
</template>

<script>
    /*  数据资料 */
    import DataTypeConfig from './dataType.config.js';

    export default {
        name: "userDate",
        props: {
            /* 是页面第几个控件 List的时候使用*/
            origin: {
                type: Number
            },
            /* 头部对应的数据*/
            tabsBodyParams: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            /* 传入的头部*/
            tabsHeadParams: {
                type: Array,
                default: () => {
                    return [];
                }
            }
        },
        data() {
            return {
                /* 当前控件的拖动值*/
                currentScrollTopValue: -1,
                /* 当前选择头部索引值*/
                currentTabsHeadParams: -1,
                /* 当前搜索值*/
                currentSearchValue: "",
                /* 当前搜索值包含的头部*/
                currentSearchHeadValue: [],
                /* 当前搜索值包含的具体数值*/
                currentSearchBodyValue: [],
                /* 上次搜索的html报文*/
                lastContextHtml: {},
                /* 当前选中控件*/
                currentSelectItem: [],
                /* 全选是否不确定*/
                allNotSure: false,
                /* 是否全选 */
                allCheck: false,
                nowIndex: 0,
                isShow: false,
                scrolltop: 0
            };
        },
        mounted() {
        },
        methods: {
            init() {
                this.currentSelectItem = []
                let bodyLength = this.tabsBodyParams[0]?.length
                for (let i = 0; i < bodyLength; i++) {
                    this.currentSelectItem.push(false)
                }
            },
            //点击全选按钮
            handleCheckAllChange(val){
                this.currentSelectItem = []
                let bodyLength = this.tabsBodyParams[0]?.list.length
                if (val === true){





                    for (let i = 0; i < bodyLength; i++) {
                        this.currentSelectItem.push(true)
                    }
                }else{
                    for (let i = 0; i < bodyLength; i++) {
                        this.currentSelectItem.push(false)
                    }
                }
                this.allNotSure = false
            },
            handleCheckedItemsChange(index) {
                let num = 0
                for (let i = 0; i < this.currentSelectItem.length; i++) {
                    if (this.currentSelectItem[i]) {
                        num++
                    }
                }
                if (num === 0) {
                    this.allNotSure = false
                    this.allCheck = false
                } else if (num === this.currentSelectItem.length) {
                    this.allNotSure = false
                    this.allCheck = true
                } else {
                    this.allNotSure = true
                    this.allCheck = false
                }
            },
            //添加文字高亮颜色
            addInputColor(itemText) {
                let context = itemText.split(this.currentSearchValue);
                return context.join('<span style="color: #00bf8a">' + this.currentSearchValue + '</span>');
            },
            //选中控件
            selectItem(item) {
                this.$emit("startEndFiltering", item);
            }
        },
        watch: {
            tabsBodyParams: {
                handler: function (val, oldVal) {
                    this.$forceUpdate()
                },
                deep: true
            }
        }
    };
</script>

<style lang="scss" scoped>

    #userDate {
        position: absolute;
        min-width: 560px;
        margin-left: 0px !important;
        margin-top: 5px;
        background-color: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        z-index: 101;

        .selectCard {
            width: auto;
            padding: 0px 16px 5px 16px;
            display: flex;
        }

        .selectOptionsContent {
            height: 350px;
            overflow-y: scroll;

            .selectOptionsContentRows {
                height: 30px;
                width: 100%;
                padding: 0px 0px 0px 16px;
            }
        }

        .selectBox{
            width: 560px;
            box-sizing: border-box;
            padding-left: 20px;
            padding-right: 20px;
            display: flex;
            flex-wrap: wrap;
        }
        .selectItem{
            width: 50%;
            height: 33px;
            display: flex;
            align-items: center;
            padding: 0px 0px 0px 10px;
            box-sizing: border-box;
            padding-left: 20px;
            &:hover{
                background-color: #e4f9f9;
            }
            .check-box {
                padding-left: 10px;
                height: 35px;
                width: 100%;
                display:flex;
                align-items:center;
            }
        }


        .searchOptionsContent {
            height: 350px;
            overflow-y: scroll;

            .searchOptionsContentRows {
                height: 30px;
                width: 100%;
                padding: 0px 0px 0px 16px;
            }

            .searchOptionsContentRowsItem {
                height: 30px;
                width: 100%;
                padding: 0px 0px 0px 16px;
                cursor: pointer;

                &:hover {
                    background-color: #EDFAF7 !important;
                }
            }
        }


        .act {
            background-color: #00b265;
            color: white;
            border-color: #00b265;
        }

        .makesure{
            margin-left: 14px;
            padding: 5px 10px 4px;
            background: #00bf8a;
            border-radius: 3px;
            color: #fff;
        }
    }
</style>

<style lang="scss" scoped>
    ::v-deep.el-input--prefix .el-input__inner {
        border: none;
        border-bottom: 1px solid #cccccc;
        border-radius: 0;
    }

    ::v-deep.el-input__icon {
        line-height: 34px;
    }

    ::v-deep.el-divider__text {
        padding: 0;
    }

    ::v-deep.el-divider--horizontal {
        margin: 20px 0;
    }

    ::v-deep.el-collapse {
        border-top: none;
    }

    ::v-deep.el-collapse-item__header {
        border-bottom: none;
        height: 38px;
    }

    ::v-deep.el-collapse-item__content {
        line-height: 2.3;
    }

    ::v-deep.el-input--prefix .el-input__inner {
        border-bottom: 1px solid #cccccc;
        border-radius: 0;
    }
</style>
